<template>
  <el-dialog v-model="dialogVisible" title="统计" width="1400px" class="more-filters-dialog">
    <div>
      <el-date-picker style="margin-right:8px" v-model="dateDate" type="date" placeholder="请选择日期" @change="bindChangeAllDate($event,'day')" />
      <el-date-picker style="margin-right:8px" v-model="monthDate" type="month" placeholder="请选择月份" @change="bindChangeAllDate($event,'month')" />
      <el-select v-model="quarterDate" style="margin-right:8px" placeholder="请选择季度" @change="bindChangeAllDate($event,'quarterDate')" clearable>
        <el-option v-for="dict in quarterList" :key="dict.value" :label="dict.label" :value="dict.value" />
      </el-select>
      <el-date-picker style="margin-right:8px" v-model="yearDate" type="year" placeholder="请选择年份" @change="bindChangeAllDate($event,'year')" />

      <div class="" style="height: 800px;overflow-y: scroll;margin-top: 20px;">
        <!-- <BarEchert v-if="echartsBarData1.xaxis?.length" :echartsData="echartsBarData1" id="bar1" /> -->

        <el-table :data="tableData" style="width: 100%" >
          <el-table-column prop="deptName" label="收费站" />
          <template v-if="type==2">
          <el-table-column prop="bigTransportCar" label="大件运输车"  />
          <el-table-column prop="oneLineDoubleAxle" label="一线双轴" />
          <el-table-column prop="specialWorkCar" label="专项作业车" />
          <el-table-column prop="changePlateCar" label="修改车牌" />
          <el-table-column prop="yellowCar" label="跳黄车牌" />
          <el-table-column prop="redCar" label="跳红车牌" />
          <el-table-column prop="illegalOverloadCar" label="违法超限超载移交车辆" />
        </template>  <template v-if="type==1">

          <el-table-column prop="carType" label="车型不符" />
          <el-table-column prop="carNumber" label="车牌不符" />
          <el-table-column prop="minFee" label="最小费额" />
          <el-table-column prop="provinceOnline" label="省中心在线计费" />
          <el-table-column prop="deptOnline" label="部中心在线计费" />
          <el-table-column prop="cpcCard" label="CPC卡状态议程" />
          <el-table-column prop="paperTicket" label="纸券" />
          <el-table-column prop="entryTime" label="入口时间异常" />
          <el-table-column prop="team" label="车队" />
          <el-table-column prop="intrude" label="闯关" />
          <el-table-column prop="freeCar" label="免费车" />
          <el-table-column prop="lostCard" label="丢卡" />

          <el-table-column prop="badCard" label="坏卡" />
          <el-table-column prop="militaryCar" label="军警车" />
          <el-table-column prop="liftGate" label="抬降杠" />

          <el-table-column prop="updateKey" label="修改键" />
          <el-table-column prop="otherCar" label="其他特情车辆" />

        </template>
        </el-table>

        <el-empty v-if="tableData.length==0"></el-empty>
      </div>

    </div>
  </el-dialog>
</template>

<script setup>
import moment from 'moment';
const dialogVisible = ref(false)
const radio = ref('1')
const monthDate = ref()
const dateDate= ref(moment().format('YYYY-MM-DD'))
const yearDate = ref()
const quarterDate = ref()
const quarterList = ref([{ label: "第一季度  01.01-03.31", value: 0 }, { label: "第二季度  04.01-06.30", value: 1 }, { label: "第三季度  07.01-09.30", value: 2 }, { label: "第四季度  10.01-12.31", value: 3 }])
const props = defineProps({
  tableData: Object,
  type:Number
});
const emit = defineEmits(['update:modelValue', 'changeType'])
watch(props.tableData, val => {
  tableData.value = val


}, { deep: true });


const bindChangeTab = (val) => {
  radio.value = val;
  emit('changeType', { val })
}

const bindChangeAllDate = (val, name) => {
  let params = {}
  if (name == 'month') {
    monthDate.value = val;
    yearDate.value = null;
    quarterDate.value = null;
    dateDate.value = null;
    params.startDate = moment(val).startOf('month').format('YYYY-MM-DD');
    params.endDate = moment(val).endOf('month').format('YYYY-MM-DD')
  } else if (name == 'day') {
    yearDate.value = null;
    monthDate.value = null;
    quarterDate.value = null;
    dateDate.value = val;
    params.startDate = moment(val).format('YYYY-MM-DD')
    params.endDate = moment(val).format('YYYY-MM-DD')
  }else if (name == 'year') {
    yearDate.value = val;
    monthDate.value = null;
    quarterDate.value = null;
    dateDate.value = null;
    params.startDate = moment(val).startOf('year').format('YYYY') + '-01-01'
    params.endDate = moment(val).startOf('year').format('YYYY') + '-12-31'
  } else {
    yearDate.value = null;
    monthDate.value = null;
    quarterDate.value = val;
    dateDate.value = null;
    let date = new Date();
    let year = yearDate.value ? moment().format("YYYY") : date.getFullYear();
    if (quarterDate.value == 0) {
      params.startDate = year + '-01-01'
      params.endDate = year + '-03-31'
    } else if (quarterDate.value == 1) {
      params.startDate = year + '-04-01'
      params.endDate = year + '-06-30'
    } else if (quarterDate.value == 2) {
      params.startDate = year + '-07-01'
      params.endDate = year + '-09-30'
    } else if (quarterDate.value == 3) {
      params.startDate = year + '-10-01'
      params.endDate = year + '-12-31'
    }
  }

  emit('changeType', { ...params })
}
// 打开弹窗方法
const open = () => {
  dialogVisible.value = true
}

defineExpose({
  open
})
</script>



<style>
</style>